<template>
  <div>
    <canvas id="canvas" width="800" height="600"></canvas>
  </div>
</template>

<script>
import { onMounted } from 'vue'
import { Canvas,Rect,FabricText } from 'fabric' // browser

export default {
  name: 'FabricExample',
  setup() {
    onMounted(() => {
      const canvas = new Canvas('canvas')
      const helloWorld = new FabricText('Hello world!')
      const rect = new Rect({
        left: 100,
        top: 100,
        fill: 'red',
        width: 200,
        height: 200,
      })
      canvas.add(rect)
      canvas.add(helloWorld)
      // const imageSrc = canvas.toDataURL()
      // const a = document.createElement('a')
      // a.href = imageSrc
      // a.download = 'image.png'
      // document.body.appendChild(a)
      // a.click()
      // document.body.removeChild(a)
    })
  },
}
</script>

<style scoped>
#canvas {
  border: 1px solid #000;
}
</style>